<template>
	<view class="cardMangerWp ">
		<view class="moreWp">
			<view class="cardWp " v-for="(item,i) in cardList" :key="i">
				<view class="card">
					<view class="left">
						<view class="imgWp">
							<img :src="item.head" v-if="item.head" alt="">
							<u-image v-else
								src="https://file.casugn.com/storecompcard/temp/avatar_1682582523631.png"
								width="96rpx" height="96rpx" alt=""></u-image>
						</view>
						<view class="info">
							<view class="name">
								<text class="u-line-1"> {{item.name?item.name:''}}</text>
							</view>
							<view class="title">
								<text class="u-line-1"> {{item.position?item.position:''}}</text>
							</view>
							<view class="company">
								<text class="u-line-1">{{item.company?item.company:''}}</text>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="more flexCenter" hover-class="hoverClass" @click.stop="handleMore(item)">
							<img style="width: 34rpx;height:34rpx;"
								src="https://file.casugn.com/storecompcard/temp/interactive-button／more-vertical@2x_1681364518905.png"
								alt="" srcset="">
						</view>
					</view>

					<view class="isDefault" v-if="item.status==0">
						当前名片
					</view>

				</view>
			</view>
		</view>
		<bottom-button @handleClick="addNewCard" title="添加新名片">
			<u-icon name="plus" color="#fff" size="30"></u-icon>
		</bottom-button>
		<u-action-sheet :closeOnClickAction="true" :safeAreaInsetBottom="true" cancelText="取消" :actions="optionList"
			@select="selectClick" @close="close" :show="showMore" round="20">
		</u-action-sheet>
	</view>

</template>


<script>
	import bottomButton from '@/components/bottom-button/bottom-button.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				showMore: false,
				showDelWp: false,
				cardList: [],
				itemInfo: null,
				optionList: [{
						name: '使用名片'
					},
					{
						name: '编辑'
					},
					{
						name: '删除',
						color: '#f53f3f',
					}
				]
			};
		},
		components: {
			bottomButton
		},
		onShow() {
			// this.queryCardInfo()
			this.queryCardInfoByOpenId()
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			//查询名片信息
			async queryCardInfo() {
				uni.getStorage({
					key: 'cardId',
					success: async (cardId) => {
						let id = cardId.data
						let res = await this.$api.queryCartById({
							id
						})
						if (res.success) {
							console.log('查询名片信息', res.result);
							this.$store.commit('userInfo', res.result)
						}
					}
				})
			},
			selectClick({
				name
			}) {
				switch (name) {
					case '使用名片':
						this.choiceCard()
						break;
					case '编辑':
						this.handleEditCard()
						break;
					case '删除':
						if (this.itemInfo.status == 0) {
							return uni.showToast({
								title: '不能删除正在使用中的名片',
								icon: 'none'
							})
						} else {
							this.handleDelCard()
						}
						break;
				}
			},
			close() {
				if (this.showMore) {
					this.showMore = !this.showMore
				}
				this.itemInfo = null
			},
			handleshowDelWp() {
				if (this.itemInfo.status == 0) {
					return uni.showToast({
						title: '不能删除正在使用中的名片',
						icon: 'none'
					});
				}
				this.showDelWp = true
			},
			//切换为使用中名片
			async choiceCard() {
				uni.showLoading({
					title: '加载中'
				})
				const {
					id
				} = this.itemInfo
				let res = await this.$api.pdateDefaultCard({
					id
				})
				if (res.success) {
					uni.hideLoading()
					this.showMore = false
					uni.showToast({
						title: '切换成功',
						icon: 'none'
					});
					uni.setStorageSync('cardId', id)
					this.queryCardInfoByOpenId()
				} else {
					uni.showToast({
						title: '切换失败',
						icon: 'none'
					});
					uni.hideLoading()
				}
			},
			async queryCardInfoByOpenId() {
				let {
					openid
				} = uni.getStorageSync('openId')
				if (openid) {
					let res = await this.$api.queryCardInfoByOpenId({
						openId: openid
					})
					if (res.success) {
						this.cardList = res.result.reverse()
					} else {
						uni.showToast({
							title: '获取名片列表失败',
							icon: 'none'
						});
						this.cardList = []
					}
				} else {
					console.log('获取openId 失败');
				}
			},
			addNewCard() {
				uni.navigateTo({
					url: `/pagesCard/createCard/createCard?cardId=${this.userInfo.id?this.userInfo.id:''}`
				})
			},
			handleMore(item) {
				this.showMore = true
				this.itemInfo = item
				console.log(item);
			},
			//跳转编辑页面
			handleEditCard() {
				this.showMore = false

				uni.navigateTo({
					url: '/pagesCard/cardEdit/cardEdit?cardId=' + this.itemInfo.id
				})
			},

			handleDelCard() {
				let id = this.itemInfo.id
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: async res => {
						if (res.confirm) {
							let res2 = await that.$api.delMyCard(id)
							if (res2.success) {
								uni.showToast({
									title: res2.message,
									icon: 'none'
								});
								that.showMore = false
								that.showDelWp = false
								that.queryCardInfoByOpenId()
							}
						} else if (res.cancel) {
							that.showMore = false
							that.showDelWp = false
						}
					}

				})



			},
			cancelDel() {
				this.showDelWp = false
				uni.showToast({
					title: '已取消'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cardMangerWp {
		height: 100%;
		background: #f7f8fa;

		.moreWp {
			height: calc(100vh - 185rpx);
			padding: 32upx;
			overflow: auto;

			.cardWp {
				margin-top: 32rpx;
				border-radius: 8upx;
				width: 686rpx;
				height: 204rpx;


				.card {
					position: relative;
					padding: 24upx 32upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #FFFFFF;

					.left {
						display: flex;
						align-items: center;

						.imgWp {
							width: 96upx;
							height: 96upx;
							margin-right: 24rpx;
							align-self: flex-start;

							img {
								border-radius: 4rpx;
								width: 100%;
								height: 100%;
							}
						}

						.info {
							.name {
								height: 44rpx;
								font-size: 32rpx;
								font-weight: 600;
								color: #1D2129;
								line-height: 45rpx;

							}

							.title {
								margin-top: 16rpx;
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #86909C;
								line-height: 39rpx;
							}

							.company {
								margin-top: 16rpx;
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #86909C;
								line-height: 39rpx;

							}
						}

					}

					.right {
						.more {
							width: 100upx;
							height: 100upx;
						}
					}
				}
			}

			.isDefault {
				text-align: center;
				position: absolute;
				right: 0;
				top: 0;
				width: 112rpx;
				height: 40rpx;
				background: #E9F0FD;
				opacity: 1;
				font-size: 24rpx;
				font-weight: 400;
				color: $u-primary;
				line-height: 40rpx;

			}




		}

		.btnWp {
			background: #f7f8fa;
			width: 100%;
			height: 88rpx;
			position: fixed;
			bottom: 30rpx;
			left: 0;
			border: none;

			.btn {
				height: 100%;
				margin: 16rpx 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $u-primary;

				.text {
					margin-left: 20upx;
					font-size: 30upx;
					font-weight: 400;
					width: 150rpx;
					height: 42rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 42rpx;
				}
			}
		}

		.hoverClass {
			box-shadow: 0 0 4rpx #eee;
		}
	}
</style>